<template>
    <div>
      <div id="top">
        <div id="topBar">
          <router-link :to="{path:'/me'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
            <p style="float: left">个人等级</p></router-link>
        </div>
      </div>
      <div id="topBox">
        <div id="one">
          <div id="pic">
          </div>
          <p id="name">
            {{name}}
          </p>
        </div>
        <div id="two">
          <p id="nextName">下一段位：{{nextName}}</p>
        </div>
        <div id="three">
          当前积分:{{points}}
        </div>
      </div>
      <div id="mid">
        <div class="privilege"><p style="text-shadow: 0 0.5rem 0.3rem">段位优待</p></div>
        <div class="privilege"><p>兑换特权</p><van-icon name="plus" class="plus"/></div>
        <div class="privilege"><p>积分特权</p><van-icon name="plus" class="plus"/></div>
        <div class="privilege"><p>抽奖特权</p><van-icon name="plus" class="plus"/></div>
      </div>
      <div id="foot">
       <p>积分获取渠道</p>
        <div>
          <button style="margin-right: 0.5rem">
            绿色出行
          </button>
          <button>
            领任务
          </button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "selfRank",
       data(){
          return{
            name:'宇宙主宰',
            nextName:'宇宙主宰爸爸',
            points:83742695645,
          }
       }
    }
</script>

<style scoped>
  #top{
    width: 100%;
    height:3rem;
    background: red;
    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    background: papayawhip;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
  #topBox{
    height: 7rem;
    width: auto;
    margin: 0.5rem 1rem;
    background: #98d6f4;
    box-sizing: border-box;
    position: relative;
  }
  #one,#two{
    width: 50%;
    height: 60%;
    background:pink;
    border-bottom: 0.2rem solid #39a9ed;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    position: relative;
  }
  #two{
    background: #42b983;
    border-bottom:0.2rem solid #999999;
  }
  #pic{
    position: absolute;
    left: 0;
    top:0;
    height: 4rem;
    width: 4rem;
    background: #98d6f4;
  }
  #name{
    font-size: 1.2rem;
    color: #39a9ed;
    position: absolute;
    left: 4rem;
    letter-spacing: 0.1rem;
  }
#nextName{
  position: absolute;
  font-size: 0.9rem;
  bottom: 0.5rem;
}
#three{
  background: pink;
  width: 100%;
  height: 40%;
  position: absolute;
  bottom: 0;
  text-align: left;
  font-size: 1rem;
  line-height: 2.8rem;
}
  #mid{
    height: 15rem;
    background: papayawhip;
    box-sizing: border-box;
    padding: 1rem 1rem;
    border:0.2rem solid #e1e1e1;
    border-left:none;
    border-right: none;
  }
  .privilege{
    height: 25%;

  }
.privilege p{
  font-size: 1.2rem;
  color: #39a9ed;
  display: inline-block;
  float: left;
  line-height: 3rem;
  height: 3rem;
}
  .plus{
    font-size: 1.5rem;
    float: right;
    line-height: 3rem;
    height: 3rem;
    color: #39a9ed;
    font-weight: bold;
  }
  #foot{
    height: 7rem;
    width: auto;
    padding: 0.5rem 0.5rem;

  }
  #foot p{
    height: 2rem;
    color: #39a9ed;
    font-size: 1rem;
    line-height: 2rem;
    text-align: left;
    width: auto;
  }
  #foot div{
    height: 4rem;
    width: auto;
    border: 0.2rem dashed #39a9ed;
  }
  button{
    background: none;
    text-decoration: none;
    width:45%;
    border: 0.1rem #39a9ed solid;
    border-radius: 0.3rem;
    height:2rem;
    margin-top: 1rem;
    color: #39a9ed;
    font-size: 1rem;
  }
</style>
